<template>
  <a-layout id="components-layout-demo-fixed-sider">
    <!--    菜单 左侧-->
    <a-layout-sider
      :style="{
        overflow: 'auto',
        height: '100vh',
        position: 'fixed',
        left: 0,
      }"
    >
      <div class="logo" />
      <r-h-menu v-bind="menuParam" />
    </a-layout-sider>
    <a-layout :style="{ marginLeft: '180px' }">
      <a-layout-header
        :style="{ background: '#fff', padding: 0 }"
      />
      <a-layout-content :style="{ margin: '24px 0px 0', overflow: 'initial' }">
        <router-view />
      </a-layout-content>
      <a-layout-footer :style="{ textAlign: 'center' }">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import RHMenu from '@/components/RHMenu/index'

export default {
  name: 'Home',
  components: {
    RHMenu
  },
  data() {
    return {
      /** 菜单参数
       *
       */
      menuParam: {
        data: [
          {
            id: 1,
            title: 'dev',
            icon: 'appstore-outlined',
            children: [
              {
                id: 2,
                title: '视图',
                icon: 'folder-view-outlined',
                path: '/view'
              },
              {
                id: 3,
                title: '表单',
                icon: 'folder-view-outlined',
                path: '/form'
              },
              {
                id: 4,
                title: '测试',
                icon: 'folder-view-outlined',
                path: '/test'
              }
            ]
          },
          {
            id: 5,
            title: '系统管理',
            icon: 'appstore-outlined',
            children: [
              {
                id: 6,
                title: 'table',
                icon: 'folder-view-outlined',
                path: '/table'
              }

            ]
          }
        ],
        click: (node) => {
          console.log(node)
          this.$router.push({ path: node.item.role })
          // this.$router.push({ name: node.item.role });
        }
      }
    }
  }
}
</script>
<style scoped>
#components-layout-demo-fixed-sider .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
</style>
